<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/xian.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.7.0/swiper-bundle.css" rel="stylesheet">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="header-container">
            <div class="header-content float-clearfix">
                <div class="logo">
                    <a href="/">
                        <img src="https://res.lancome.com.cn/build/images/logo@2x.png?version=20210616202855146"
                            title="兰蔻官方商城" alt="兰蔻官方商城">
                    </a>
                </div>
            </div>
            <div class="nav-content float-clearfix">
                <div class="logo" style="display: none;">
                    <a href="/">
                        <img src="https://res.lancome.com.cn/build/images/logo@2x.png?version=20210616202855146"
                            title="兰蔻官方商城" alt="兰蔻官方商城" data-image="{
                        &quot;standard&quot;:{&quot;high&quot;:&quot;&quot;, &quot;normal&quot;:&quot;https://res.lancome.com.cn/build/images/logo@2x.png?version=20210616202855146&quot;},
                        &quot;medium&quot;:{&quot;high&quot;:&quot;&quot;, &quot;normal&quot;:&quot;https://res.lancome.com.cn/build/images/logo@2x.png?version=20210616202855146&quot;},
                        &quot;small&quot;:{&quot;high&quot;:&quot;&quot;, &quot;normal&quot;:&quot;https://res.lancome.com.cn/build/images/logo@2x.png?version=20210616202855146&quot;}
                    }">
                    </a>
                </div>
                <ul class="nav">
                    <li>首页</li>
                    <li>护肤</li>
                    <li>彩妆</li>
                    <li>香水</li>
                    <li>
                        <a href="./lian.html">
                            <span>
                                618限时秒杀<span class="tag">HOT</span>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="./lian.html">
                            <span>
                                必囤套装<span class="tag">HOT</span>
                            </span>

                        </a>
                    </li>
                    <li>
                        <a href="./lian.html">
                            <span>
                                菁纯奢宠<span class="tag">HOT</span>
                            </span>

                        </a>
                    </li>
                    <li>
                        <a href="./lian.html">
                            <span>
                                尝鲜礼盒<span class="tag">HOT</span>
                            </span>

                        </a>
                    </li>
                    <li>试用中心</li>
                    <li>会员中心</li>
                </ul>
                <div class="float">
                    <div class="iconfont icon-fangdajing ic">
                        <div class="sh">
                            <input type="text" placeholder="甄选星品">
                        </div>
                    </div>
                    <a href="./gw.html" class="iconfont icon-gouwuche"></a>
                    <a href="./den.html" class="iconfont icon-wode"></a>
                </div>
            </div>
        </div>
    </div>

    <!--  -->
    <div class="headers">
        <div id="demo">
            <div id="small-box">
                <div id="mark"></div>
                <div id="float-box"></div>
                <img
                    src="https://res.lancome.com.cn/resources/2019/11/18/15740850015447278_900X900.jpg?version=20210616202855146" />
                <div id="big-box">
                    <img src="./img/15740850015447278_900X900.jpg" />
                </div>
            </div>


            <div class="pdp-details-thumbs-swiper-box">
                <div class="swiper-container pdp-details-thumbs-swiper swiper-container-horizontal">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide swiper-slide-active" style="margin-right: 18px;">
                            <img
                                src="https://res.lancome.com.cn/resources/2019/11/18/15740850015447278_900X900.jpg?version=20210616202855146">
                        </div>
                        <div class="swiper-slide swiper-slide-next" style="margin-right: 18px;">
                            <img
                                src="https://res.lancome.com.cn/resources/2019/11/18/15740850039423712_900X900.jpg?version=20210616202855146">
                        </div>
                        <div class="swiper-slide" style="margin-right: 18px;">
                            <img
                                src="https://res.lancome.com.cn/resources/2019/11/18/15740850063501836_900X900.jpg?version=20210616202855146">
                        </div>
                        <div class="swiper-slide" style="margin-right: 18px;">
                            <img
                                src="https://res.lancome.com.cn/resources/2021/3/12/16155295250853798_900X900.jpg?version=20210616202855146">
                        </div>
                        <div class="swiper-slide swiper-slide-active" style="margin-right: 18px;">
                            <img
                                src="https://res.lancome.com.cn/resources/2019/11/18/15740850015447278_900X900.jpg?version=20210616202855146">
                        </div>
                        <div class="swiper-slide swiper-slide-next" style="margin-right: 18px;">
                            <img
                                src="https://res.lancome.com.cn/resources/2019/11/18/15740850039423712_900X900.jpg?version=20210616202855146">
                        </div>
                        <div class="swiper-slide" style="margin-right: 18px;">
                            <img
                                src="https://res.lancome.com.cn/resources/2019/11/18/15740850063501836_900X900.jpg?version=20210616202855146">
                        </div>
                        <div class="swiper-slide" style="margin-right: 18px;">
                            <img
                                src="https://res.lancome.com.cn/resources/2021/3/12/16155295250853798_900X900.jpg?version=20210616202855146">
                        </div>
                    </div>
                </div>
                <div class="swiper-button-next pdp-details-thumbs-swiper-next swiper-button-gray"></div>
                <div
                    class="swiper-button-prev pdp-details-thumbs-swiper-prev swiper-button-gray ">
                </div>
            </div>
        </div>
        <div class='zi'>
            <div class="pdp-details-sub-title">Hydra Zen Moisturising Aqua Gel Fresh</div>
            <div class="pdp-details-main-title">水份缘舒缓柔肤啫喱</div>
            <div class="pdp-details-price">¥475</div>
            <select class="qi">
                <option value="">200毫升</option>
            </select>
            <div class="pdp-details-pc-point-box">
                <div class="pdp-details-pc-point-tips">购买可得积分</div>
                <div class="pdp-details-pc-point-text"><span class="pdp-detail-member-grade">兰蔻粉丝</span>会员可得至多<span
                        class="pdp-details-pc-point-num">475</span>积分（以结算页面实付金额为准）</div>
            </div>
            <div class="pdp-details-pc-button-box">
                <a href="./gw.html"><button class="pdp-details-arrival-notice">立即预约</button></a>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="xian">
        <ul>
            <li id="ch">产品详情</li>
            <li>购物礼遇</li>
            <li>用户评论</li>
            <li>更多推荐</li>
        </ul>
    </div>
    <div class="tu">
        <img src="https://res.lancome.com.cn/resources/2021/6/21/16242876918151183.jpg" alt="">
        <img src="https://res.lancome.com.cn/resources/2018/8/21/15348341125495945.jpg" alt="">
        <img src="https://res.lancome.com.cn/resources/2018/8/21/15348341292558394.jpg" alt="">
        <img src="https://res.lancome.com.cn/resources/2018/8/21/15348341401311352.jpg" alt="">
        <img src="https://res.lancome.com.cn/resources/2018/8/21/15348341536294683.jpg" alt="">
    </div>

    <!-- 底部 -->
    <footer class="footer">
        <div class="footer-guide">
            <ul class="float-clearfix">
                <li class="guide-item">
                    <h3>关于我们<i class="icon icon-back-top"></i></h3>
                    <div class="guide-item-content">
                        <ul>
                            <li class="addTo-lancome"><a target="_blank" href="/landingpage/join-us">加入兰蔻</a></li>
                            <li class="member-center"><a href="javascript:void(0);"
                                    onclick="return jumpMemberCenter()">会员中心</a></li>
                        </ul>
                    </div>
                </li>
                <li class="guide-item">
                    <h3>联系我们<i class="icon icon-back-top"></i></h3>
                    <div class="guide-item-content">
                        <ul>
                            <li class="online-consultation-remark"><a
                                    class="e-online-consultation showOulaiya">线上美容顾问</a>
                            </li>
                            <li class="none-sm">
                                <p>客服热线：400-820-8016</p>
                            </li>
                            <li class="none block-sm"><a href="tel:400-820-8016">客服热线：400-820-8016</a></li>
                        </ul>
                    </div>
                </li>
                <li class="send-return">
                    <h3><a href="/customer-service-help-center.html">配送及退货</a></h3>
                </li>
                <li class="counter-query">
                    <h3><a href="/stores">专柜查询</a></h3>
                </li>
                <li class="">
                    <h3>关注我们</h3>
                    <div class="item-share">
                        <ul class="float-clearfix">
                            <li>
                                <a><i class="icon iconfont icon-weixin"></i><span>官方微信</span></a>
                                <div class="weixin-popup">
                                    <div>
                                        <img src="https://res.lancome.com.cn/build/images/new-img/footer-4.png"
                                            style="opacity: 1;">
                                    </div>
                                </div>
                            </li>
                            <li class="wei-bo"><a target="_blank" href="https://weibo.com/lancome"><i
                                        class="icon iconfont icon-xinlangweibo"></i><span>官方微博</span></a>
                            </li>
                        </ul>

                    </div>
                </li>
            </ul>
            <div class="footer-select float-clearfix">
                <div class="footer-select-item">
                    <p><i class="icon icon-mail none-sm"></i><span>电子邮件</span></p>
                    <div class="form-input subscribe">
                        <input class="footer-bottom-input" type="text" maxlength="" placeholder="* 输入您的邮箱"
                            id="subscribe">
                        <button class="e-footer-mail-btn" id="subscription">确定</button>
                        <div class="msg-block">
                            <span style="color:#d51b51;font-size:12px">请输入有效的邮箱</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="footer-container">
            <ul style="margin-bottom: 18px;font-size: 12px;">
                <li><span>国家药监局提示您：宣称用于祛斑美白、防晒、染发、烫发等的化妆品为特殊用途化妆品，产品标签上应标注“国妆特字”或者“国妆特进字”的标准文号。</span>
                </li>
            </ul>

            <ul class="statement">
                <li class="none-sm">
                    <span>© L’Oreal China 欧莱雅（中国）有限公司版权所有</span>
                </li>
                <li>
                    <i class="icon icon-footer-zggs"></i>
                    <a target="_blank"
                        href="http://wap.scjgj.sh.gov.cn//businessCheck/verifKey.do?showType=extShow&amp;serial=9031000020170518090333000001788070-SAIC_SHOW_310000-2012041023233378655&amp;signData=MEQCIC1EYAXJibTl39TcZqED26v2xVQIXO0gFJ8lNsUhO02wAiBjblUFfS5r1ezDJXX3NoQixYijB6IdK7kJ7vx1664UZw=="
                        rel="nofollow">
                        <span>中国工商</span>
                    </a>&nbsp;
                    <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index" rel="nofollow">
                        <span>沪ICP备08100043号-34</span>
                    </a>
                </li>
                <li>
                    <i class="icon icon-footer-hgyab"></i>
                    <a target="_blank"
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010602001526"
                        rel="nofollow">
                        <span>沪公网安备 31010602001526号</span>
                    </a>
                </li>
                <li class="none block-sm">
                    <span>© L’Oreal China 欧莱雅（中国）有限公司版权所有</span>
                </li>
            </ul>
            <div class="con-content">
                <ul>
                    <li>
                        <a target="_blank" href="http://policy.lorealchina.com/termsofusewebsite"
                            rel="nofollow">使用条款</a>
                    </li>
                    <li>
                        <a target="_blank" href="http://policy.lorealchina.com/cookiespolicy"
                            rel="nofollow">Cookies政策</a>
                    </li>
                    <li>
                        <a target="_blank" href="http://policy.lorealchina.com/privacypolicy" rel="nofollow">隐私政策</a>
                    </li>
                </ul>
                <p class="none-sm">浏览该网站表示您接受并同意我们使 用cookies为您提供个性化的浏览体验。点击<a target="_blank"
                        href="http://policy.lorealchina.com/cookiespolicy">Cookies政策</a>了解详情</p>
            </div>
        </div>
    </footer>
    <script src="./vendor/jquery/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.7.0/swiper-bundle.js"></script>
    <!-- <script>
        let mySwiper = new Swiper('.swiper-container ', {
            loop: true,
            // autoplay: false,//可选选项，自动滑动
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })
    </script> -->
    <script language="javascript"> 
        var mySwiper = new Swiper('.swiper-container',{
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            disabledClass: 'my-button-disabled',
          },
        })
        </script>
        <style>
        .my-button-disabled{
          opacity:0.2;
        }
        </style>
    <script>

        //页面加载完毕后执行
        window.onload = function () {
            //找六个个元素：demo，smallBox,foatBox,mark,bigfloatBox,imgs,
            var objDemo = document.getElementById("demo");
            var objSmallBox = document.getElementById("small-box");
            var objMarkBox = document.getElementById("mark");
            var objFloatBox = document.getElementById("float-box");
            var objBigBox = document.getElementById("big-box");
            var objBigBoxImg = objBigBox.getElementsByTagName("img")[0];

            //给小盒子添加事件，移入和移出
            //移入：浮动的box和和bigBox显示
            objSmallBox.onmouseover = function () {
                objFloatBox.style.display = "block";
                objBigBox.style.display = "block";
            }
            //移除：浮动的box和bigBox隐藏
            objSmallBox.onmouseout = function () {
                objFloatBox.style.display = "none";
                objBigBox.style.display = "none";
            }

            //给小盒子添加鼠标移动事件
            objMarkBox.onmousemove = function (ev) {
                var _event = ev || window.event;//做兼容性，兼容IE
                //1计算值：
                var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
                var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;

                //5.优化，在前面加判断,不让其溢出，加判断
                if (left < 0) left = 0;
                if (top < 0) top = 0;
                if (left > objSmallBox.offsetWidth - objFloatBox.offsetWidth)
                    left = objSmallBox.offsetWidth - objFloatBox.offsetWidth;
                if (top > objSmallBox.offsetHeight - objFloatBox.offsetHeight)
                    top = objSmallBox.offsetHeight - objFloatBox.offsetHeight;

                //2把值赋值给放大镜
                objFloatBox.style.left = left + "px";
                objFloatBox.style.top = top + "px";

                //3计算比例
                var percentX = left / (objMarkBox.offsetWidth - objFloatBox.offsetWidth);
                var percentY = top / (objMarkBox.offsetHeight - objFloatBox.offsetHeight);

                //4利用这个比例计算距离后赋值给右侧的图片
                objBigBoxImg.style.left = -percentX * (objBigBoxImg.offsetWidth - objBigBox.offsetWidth) + "px";
                objBigBoxImg.style.top = -percentY * (objBigBoxImg.offsetHeight - objBigBox.offsetHeight) + "px";
            }

        }
    </script>
</body>

</html>